<template>
  <div class="shopping-wrapper">
    <div class="top-nav">
      <van-nav-bar
        title="购物车"
        right-text="删除"
        left-arrow
        @click-right="del"
      />
    </div>
    <div class="card-list">
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <div class="card-box" v-for="item in list" :key="item.id">
          <van-checkbox class="check" :name="item.id"></van-checkbox>
          <GoodsCard v-bind="item" :num="counterMap[item.id]" :nofly="true" />
        </div>
      </van-checkbox-group>
    </div>
    <van-submit-bar
      :price="allMoney"
      :button-text="`去结算(${totalNum})`"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import GoodsCard from '@/components/GoodsCard.vue';
import getGoodsByIds from '@/api/getGoodsByIds';
import { mapMutations, mapState } from 'vuex';
import { Toast, Dialog } from 'vant';

export default {
  components: {
    GoodsCard,
  },

  data() {
    return {
      result: [],
      list: [],
      checked: false,
    };
  },
  computed: {
    ...mapState(['counterMap']),
    allMoney() {
      const arr = this.list.filter((r) => this.result.includes(r.id));
      return arr.reduce((prev, next) => {
        const num = this.counterMap[next.id] || 0;
        return Math.round(num * next.price * 100) + prev;
      }, 0);
    },
    totalNum() {
      const arr = this.list.filter((r) => this.result.includes(r.id));
      const res = arr.reduce((prev, next) => prev + (this.counterMap[next.id] || 0), 0);
      return res;
    },
  },
  methods: {
    ...mapMutations(['setStorage']),
    async getAllData() {
      const result = Object.keys(this.counterMap);
      const res = await getGoodsByIds(result.join());
      this.list = res.list;
    },
    del() {
      if (this.result.length === 0) {
        Toast('你还没有选中任何商品');
        return;
      }
      Dialog.confirm({
        title: '删除',
        message: '确认删除选中项吗？',
      })
        .then(() => {
          this.result.forEach((id) => {
            this.setStorage({ id, value: -1 });
            this.list = this.list.filter(
              (item) => !this.result.includes(item.id),
            );
          });
          //   this.list = this.list.filter((item) => {
          //     const len = this.result.findIndex((x) => x === item.id);
          //     if (len === -1) {
          //       return true;
          //     }
          //     this.result.splice(len, 1);
          //     return false;
          //   });
          //   if (this.list.length === 0) {
          //     this.checked = false;
          //   }
        })
        .catch(() => {
          // on cancel
        });
    },
    onSubmit() {},
    checkAll() {
      if (this.checked) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll();
      }
    },
  },
  created() {
    this.getAllData();
  },
  watch: {
    result() {
      if (this.result.length === this.list.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.shopping-wrapper {
  background: #eee;
  min-height: 100vh;

  .top-nav {
    mask-position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
  }
  .card-list {
    position: absolute;
    width: 100%;
    top: 46px;
    box-sizing: border-box;
    z-index: 0;
    padding: 10px 10px 100px 10px;
    background: #fff;
    .card-box {
      display: flex;
      justify-content: center;
    }
    .check {
      margin-right: 10px;
      flex-shrink: 0;
    }
  }
  .van-submit-bar {
    bottom: 50px;
  }
}
</style>
